<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="投稿" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>

		<view class="create-main">
			<view class="maxTitle">基础信息</view>
			<view class="sub border-box">
				<view class="flex align-item_center justify-content_space-between">
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">地图</view>
						<view class="input"><up-input placeholder="请输入地图" border="none" v-model="data.typeName" readonly
								color="#ffffff" placeholderStyle="color:#5E5C6F"></up-input>
						</view>
					</view>
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">鱼种</view>
						<view class="input" @click="typeListOpen(4)"><up-input placeholder="请选择鱼种" border="none"
								v-model="data.fishSpecs" readonly color="#ffffff" placeholderStyle="color:#5E5C6F"></up-input>
						</view>
					</view>
				</view>
				<view class="flex align-item_center justify-content_space-between">
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">坐标</view>
						<view class="input"><up-input placeholder="请输入坐标" border="none" v-model="data.coordinate" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input></view>
					</view>
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">标题</view>
						<view class="input"><up-input placeholder="请输入标题" border="none" v-model="data.title" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input>
						</view>
					</view>
				</view>


				<!-- 	<view class="item flex align-item_baseline justify-content_space-between">
					<view class="title">推荐</view>
					<view class="input"><up-input  placeholder="请输入推荐" border="none" v-model="data.recommend"
							color="#ffffff" placeholderStyle="color:#5E5C6F"></up-input>
					</view>
				</view> -->

				<view class="flex align-item_center justify-content_space-between">
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">卡米</view>
						<view class="input"><up-input placeholder="请输入卡米" border="none" v-model="data.fishLike" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input></view>
					</view>
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">钓组</view>
						<!--  @click="typeListOpen(3)" -->
						<view class="input"><up-input placeholder="请选择钓组" border="none" v-model="data.temperature" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input></view>
					</view>
				</view>

				<view class="flex align-item_center justify-content_space-between">
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">渔具</view>
						<view class="input"><up-input placeholder="请输入渔具" border="none" v-model="data.fishGear" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input>
						</view>
					</view>
					<view class="item flex align-item_baseline justify-content_space-between">
						<view class="title">引线</view>
						<view class="input"><up-input placeholder="请输入引线" border="none" v-model="data.leadSize" color="#ffffff"
								placeholderStyle="color:#5E5C6F"></up-input>
						</view>
					</view>
				</view>
				<view class="item flex align-item_baseline justify-content_space-between">
					<view class="title">标签</view>
					<view class="input" style="width:100%;border-color: transparent" @click="fieldOpen"><up-input
							placeholder="请选择标签" border="none" v-model="data.field" readonly color="#ffffff"
							placeholderStyle="color:#5E5C6F"></up-input>
					</view>
				</view>
			</view>
			<up-gap height="50rpx"></up-gap>
			<view class="maxTitle">说明</view>
			<view class="remark sub border-box">
				<up-textarea v-model="data.content" maxlength="-1" placeholder="请输入说明文字" border="none" color="#ffffff"
					placeholderStyle="color:#5E5C6F"></up-textarea>
			</view>
			<up-gap height="4rpx"></up-gap>
			<view class="sub border-box remark-time">
				<view class="item flex align-item_center justify-content_space-between">
					<view class="title">时间</view>
					<view class="input" style="width:100%;border-color: transparent" @click="showTime"><up-input
							placeholder="请选择时间" border="none" v-model="data.fishTime" suffixIcon="arrow-right"
							suffixIconStyle="color: #ffffff" color="#ffffff" placeholderStyle="color:#5E5C6F" readonly></up-input>
					</view>
				</view>
			</view>
			<up-gap height="50rpx"></up-gap>
			<view class="maxTitle">上传截图</view>
			<view class="sub border-box upload">
				<view class="mintitle">鱼获收益</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view v-for="(item,index) in data.fishImgs" :key="index" class="v-upload" @click="uploadImg(1,index)"
						style="margin-right: 20rpx;">
						<image :src="item" mode="aspectFill" class="radius16" />
					</view>
					<view v-if="data.fishImgs.length < imgLength" class="v-upload" @click="uploadImg(1)">
						<image src="https://ryyf.wangjintech.cn/static/image/common/15.png" />
					</view>
				</view>
				<up-gap height="50rpx"></up-gap>
				<view class="mintitle">装备配置</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view v-for="(item,index) in data.gearImgs" :key="index" class="v-upload" @click="uploadImg(2,index)"
						style="margin-right: 20rpx;">
						<image :src="item" mode="aspectFill" class="radius16" />
					</view>
					<view v-if="data.gearImgs.length < imgLength" class="v-upload" @click="uploadImg(2)">
						<image src="https://ryyf.wangjintech.cn/static/image/common/15.png" />
					</view>
				</view>
				<up-gap height="50rpx"></up-gap>
				<view class="mintitle">坐标地图</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view v-for="(item,index) in data.coordinateImgs" :key="index" class="v-upload" @click="uploadImg(3,index)"
						style="margin-right: 20rpx;">
						<image :src="item" mode="aspectFill" class="radius16" />
					</view>
					<view v-if="data.coordinateImgs.length < imgLength" class="v-upload" @click="uploadImg(3)">
						<image src="https://ryyf.wangjintech.cn/static/image/common/15.png" />
					</view>
				</view>
				<up-gap height="50rpx"></up-gap>
			</view>
			<up-gap height="50rpx"></up-gap>
			<view class="flex review">
				<view class="mintitle">评论状态</view>
				<view>
					<view class="flex align-item_center item" @click="data.commentStatus = true">
						<image v-if="data.commentStatus" src="https://ryyf.wangjintech.cn/static/image/common/16.png" />
						<image v-else src="https://ryyf.wangjintech.cn/static/image/common/17.png" />
						<view :class="{active:data.commentStatus}">可评论</view>
					</view>
					<view class="flex align-item_center item " @click="data.commentStatus = false">
						<image v-if="!data.commentStatus" src="https://ryyf.wangjintech.cn/static/image/common/16.png" />
						<image v-else src="https://ryyf.wangjintech.cn/static/image/common/17.png" />
						<view :class="{active:!data.commentStatus}">不可评论</view>
					</view>
				</view>
			</view>
		</view>

		<view class="v-button" style="bottom: 110rpx;" @click="verify">提交发布</view>
		<up-gap height="240rpx"></up-gap>

		<!-- 鱼种/钓组 -->
		<up-picker :show="openAllList.typeShow" :columns="openAllList.typeList" @cancel="allTypeCancel"
			@confirm="allTypeConfirm" keyName="name"></up-picker>

		<!-- 标签 -->
		<up-picker :show="field.show" :columns="field.list" @cancel="fieldCancel" @confirm="fieldConfirm"></up-picker>

		<!-- 时间 -->
		<up-datetime-picker :show="time.show" v-model="time.value" mode="datetime" @cancel="timeCancel"
			@confirm="timeConfirm"></up-datetime-picker>
	</view>
</template>

<script setup>
	import dayjs from "dayjs";
	import upload from "@/utils/upload.js"
	import openApi from "@/api/biz/open";
	import {
		msg,
		back
	} from "@/utils/tool.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive
	} from 'vue';

	let imgLength = 3;

	const field = reactive({
		show: false,
		list: [
			['搬砖', '蹲星']
		]
	})

	const fieldConfirm = (val) => {
		data.field = val.value[0]
		fieldCancel()
	}

	const fieldCancel = () => {
		field.show = false;
	}
	const fieldOpen = () => {
		field.show = true;
	}

	// 种类
	const openAllList = reactive({
		type: 3,
		typeShow: false,
		typeList: [],
		fishSpecs: [],
		temperature: []
	})

	const allTypeConfirm = (val) => {
		let c = val.value[0]
		if (openAllList.type === 4) data.fishSpecs = c.name;
		else data.temperature = c.name;
		allTypeCancel()
	}

	const allTypeCancel = () => {
		openAllList.typeShow = false;
	}

	const typeListOpen = (type) => {
		openAllList.type = type;
		if (type === 4) openAllList.typeList = [openAllList.fishSpecs]
		else if (type === 3) openAllList.typeList = [openAllList.temperature]

		openAllList.typeShow = true;
	}

	// 获取种类
	const getTypes = () => {
		openApi.allList({
			type: 4,
			parentId: data.typeId
		}).then(res => openAllList.fishSpecs = res.data);

		openApi.allList({
			type: 3
		}).then(res => openAllList.temperature = res.data);
	}

	function verify() {
		if (!data.fishSpecs.trim()) return msg("请选择鱼种")
		if (!data.coordinate.trim()) return msg("请输入坐标")
		if (!data.title.trim()) return msg("请输入标题")
		// if (!data.recommend.trim()) return msg("请输入推荐")
		if (!data.fishLike.trim()) return msg("请输入卡米")
		if (!data.temperature.trim()) return msg("请选择钓组")
		if (!data.fishGear.trim()) return msg("请输入渔具")
		if (!data.leadSize.trim()) return msg("请输入引线")
		if (!data.content.trim()) return msg("请输入说明文字")
		if (!data.fishTime.trim()) return msg("请选择时间")
		if (data.fishImgs.length === 0) return msg("请上传渔获截图")
		if (data.gearImgs.length === 0) return msg("请上传坐标截图")
		if (data.coordinateImgs.length === 0) return msg("请上传渔获截图")
		sumbit()
	}

	function sumbit() {
		uni.showLoading({
			title: "正在提交",
			mask: true
		})

		openApi.createStrategy({
			...data,
			fishImg: data.fishImgs.join(),
			gearImg: data.gearImgs.join(),
			coordinateImg: data.coordinateImgs.join(),
			reason: data.typeName,
			fishTime: time.value,
			typeName: undefined,
			fishImgs: undefined,
			gearImgs: undefined,
			coordinateImgs: undefined,
		}).then((res) => {
			uni.hideLoading()
			if (res.code === 0) {
				msg("提交成功");
				back()
			}
		})
	}

	function uploadImg(type, index = -1) {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				upload(chooseImageRes.tempFilePaths[0]).then((res) => {
					if (type === 1) {
						if (index === -1) data.fishImgs.push(res.data);
						else data.fishImgs.splice(index, 1, res.data)
					} else if (type === 2) {
						if (index === -1) data.gearImgs.push(res.data);
						else data.gearImgs.splice(index, 1, res.data)
					} else if (type === 3) {
						if (index === -1) data.coordinateImgs.push(res.data);
						else data.coordinateImgs.splice(index, 1, res.data)
					}
				})
			}
		});
	}

	function timeConfirm(e) {
		data.fishTime = dayjs(e.value).format("YYYY.MM.DD HH:mm:ss")
		timeCancel()
	}

	function timeCancel() {
		time.show = false
	}

	function showTime() {
		time.show = true
	}
	const time = reactive({
		show: false,
		value: new Date().getTime()
	})

	const data = reactive({
		field: '', // 搬砖，蹲新
		typeId: "",
		typeName: "",
		type: 1,
		typeId: "",
		fishSpecs: "",
		coordinate: "",
		title: "",
		recommend: "",
		fishLike: "",
		temperature: "",
		fishGear: "",
		leadSize: "",
		content: "",
		fishTime: "",
		fishImg: "",
		fishImgs: [],
		gearImg: "",
		gearImgs: [],
		coordinateImg: "",
		coordinateImgs: [],
		commentStatus: true
	})

	onLoad((option) => {
		data.typeId = option.id
		data.typeName = option.name
		getTypes()
	})
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.maxTitle {
		padding: 0 30rpx;
		font-weight: 600;
		font-size: 42rpx;
		color: #FFFFFF;
		line-height: 52rpx;
	}

	.mintitle {
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.create-main {
		.review {
			margin: 0 30rpx;

			.item {
				padding-bottom: 37rpx;

				view {
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					opacity: .4;
				}

				.active {
					opacity: 1;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 50rpx;
					margin-right: 17rpx;
				}
			}


		}

		.remark-time {

			padding: 10rpx 20rpx !important;

			.item {

				.input {
					padding: 0rpx !important;
				}
			}
		}

		.remark {
			padding: 30rpx 20rpx !important;

			:deep(.u-textarea) {
				background-color: #25223B !important;
			}
		}

		.sub {
			width: 690rpx;
			background: #25223B;
			padding: 30rpx 20rpx 0;
			border-radius: 16rpx;
			margin: 30rpx auto 0;

			.item {
				height: 120rpx;

				.input {
					// margin-left: 20rpx;
					// width: 510rpx;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid rgba(255, 255, 255, .2);
				}

				.title {
					margin-left: 10rpx;
					margin-right: 15rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					white-space: nowrap;
				}
			}

			.item:last-child {
				.input {
					// padding-bottom: 0rpx;
					// border-bottom: none;
				}
			}

			.item:not(:first-child) {
				// margin-top: 20rpx;
			}
		}
	}
</style>